<template>
	<view class="index-content gradient-background">
		<Navbar :hideBtn="true" title="首页" bgColor="transparent" :h5Show="false" :fixed="false"></Navbar>
		<view class="index-block">
			<view class="index-block-title">每日英语</view>
		</view>
		<view v-if="study" style="margin-top: 40%; display: flex; justify-content: center;">
			<view class="container">
				<u-row>
					<u-col span="8">
						<u--text bold @click="navigateTo('/pages/index/course')" align="left" suffixIcon="edit-pen-fill"
							iconStyle="font-size: 20px" size="18" :text="courseName"></u--text>
					</u-col>
					<u-col span="4">
						<u--text @click="navigateTo('/pages/index/dictionary?id=' + id)" align="right"
							prefixIcon="file-text-fill" iconStyle="font-size: 18px" size="14" text="词表"></u--text>
					</u-col>
				</u-row>
				<u-row class="row-margin-bottom">
					<u-col span="6">
						<view>已学{{calculatePercentage(learned, totalNum)}}% </view>
					</u-col>
					<u-col span="6" style="text-align: right;">
						<view>{{learned}}/{{totalNum}}</view>
					</u-col>
				</u-row>
				<u-row class="row-margin-top">
					<u-line-progress :percentage="calculatePercentage(learned, totalNum)" :showText="false"
						activeColor="#7dff8c"></u-line-progress>
				</u-row>
			</view>
		</view>

		<view style="margin-top: 40%; ">
			<u-button v-if="study && notLearned > 0" class="button" type="success" icon="rewind-right-fill" shape="circle"
				@click="navigateTo('/pages/index/study?id=' + id)">{{ learned > 0 ? '继续学习' : '开始学习'}}</u-button>
				<u-button v-if="!study" class="button" type="success" icon="plus-circle-fill" shape="circle"
					@click="navigateTo('/pages/index/course')">绑定课程</u-button>
				<u-button v-if="study && learned > 0" class="button_warn" style="margin-top: 10px;" type="success" icon="reload" shape="circle"
					@click="reloadStudy()">重新学习</u-button>
		</view>


	</view>
</template>

<script>
	import Navbar from '@/components/navbar/Navbar'
	import UButton from "../../uni_modules/uview-ui/components/u-button/u-button.vue";
	import * as IndexApi from '@/api/index';

	let _now = new Date();
	let now_time = {};
	now_time.year = _now.getFullYear()
	now_time.month = _now.getMonth() + 1
	now_time.day = _now.getDay()

	export default {
		components: {
			UButton,
			Navbar,
		},
		data() {
			return {
				isCanvas2d: true,
				delayload: false,
				courseName: null,
				learned: 0,
				notLearned: 0,
				totalNum: 0,
				id: null,
				study: false,
			}
		},
		onShow() {
			this.loadData()
		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			loadData() {
				IndexApi.selectCourseBinding().then(res => {
					console.log("res", res);
					if (res.data) {
						this.courseName = res.data.courseName;
						this.learned = res.data.learned;
						this.notLearned = res.data.notLearned;
						this.totalNum = res.data.totalNum;
						this.id = res.data.courseId;
						this.study = true;
					}

				})
			},
			calculatePercentage(learned, totalNum) {
				if (totalNum == 0) {
					return 0;
				}
				// 计算百分比
				console.debug("========", learned, totalNum, Math.round(learned / totalNum * 100));
				return Math.round(learned / totalNum * 100);
			},
			reloadStudy(){
				//重置课程
				if(!this.id){
					return;
				}
				IndexApi.courseRelearn(this.id).then(res => {
					console.log("res", res);
					if (res.code == 200) {
						this.navigateTo('/pages/index/study?id=' + this.id)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
	.index-content {
		background-color: #f3f4f6;
		min-height: 100vh;
	}

	.index-block {
		padding: 40rpx;
	}

	.index-block-title {
		font-size: 40rpx;
		font-weight: bold;
		padding: 0 0 40rpx 0;
	}
</style>

<style lang="scss" scoped>
	.container {
		width: 80%;
		text-align: center;
		padding: 20px;
		background-color: #f0f0f0;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.row-margin-bottom {
		font-size: 12px;
		margin-bottom: 1px;
		margin-top: 20px;
	}

	.row-margin-top {
		margin-top: 0px;
	}

	.button {
		font-size: 16px;
		width: 80%;
		background: linear-gradient(145deg, #80c0be, #4c9480);
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
	
	.button_warn {
		font-size: 16px;
		width: 80%;
		background: linear-gradient(145deg, #ffaa00, #b07500);
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
</style>